<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--得到first+last=fullname-->
    <span>{{firstName}}-{{lastName}}</span>

    <!--methods 插值语法支持访问函数 将函数的返回值作为显示的结果-->
<!--    <span>{{fullName()}}</span>-->

    <!--调用计算属性函数 返回值作为显示的结果  计算属性的函数当做一个属性来使用不需要括号-->
    <span>{{fullName}}</span>

</div>

<script>
    new Vue({
        el:'#app',
        data(){
            return{
                firstName:'张',
                lastName:'三'
            }
        },
        methods:{
            //让函数返回first+last的值  能实现计算属性的效果
            // fullName(){
            //     return this.firstName + "*" + this.lastName;
            // }
        },
        //计算属性 也是通过函数的返回值来进行计算
        computed:{
            //计算属性中的函数
            fullName(){
                    return this.firstName + "*" + this.lastName;
            }
        }
    });

</script>

</body>
</html>